<template>
    <div>
        <h2>Cargo Table</h2>
        <table border="1">
            <thead>
            <tr>
                <th>入库时间</th>
                <th>车牌号</th>
                <th>入库件数</th>
                <th>入库吨数</th>
                <th>开船日</th>
                <th>订单号</th>
                <th>出库件数</th>
                <th>出库吨数</th>
                <th>提单号</th>
                <th>业务号</th>
                <th>仓储费</th>
                <th>剩余吨量</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(cargo, index) in cargos" :key="index">
                <td>{{ cargo.inboundDate }}</td>
                <td>{{ cargo.licensePlate }}</td>
                <td>{{ cargo.inboundQuantity }}</td>
                <td>{{ cargo.inboundWeight }}</td>
                <td>{{ cargo.shippingDate }}</td>
                <td>{{ cargo.orderNumber }}</td>
                <td>{{ cargo.outboundQuantity }}</td>
                <td>{{ cargo.outboundWeight }}</td>
                <td>{{ cargo.billOfLading }}</td>
                <td>{{ cargo.businessNumber }}</td>
                <td>{{ cargo.storageFee }}</td>
                <td>{{ cargo.remainingWeight }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    props: ['cargos']
}
</script>

<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}
</style>



